<!--
 * @Author:
 * @Date: 2023-08-18 17:02:53
 * @LastEditors:
 * @LastEditTime: 2023-08-18 18:28:47
 * @FilePath: \immoka-admin\src\views\imperialSuit\suitList.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name} , All Rights Reserved.
-->
<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-button type="primary" size="default" @click="handleAdd">新增</el-button>

            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="礼物ID" prop="gift_id"></el-table-column>
                <el-table-column label="框特效" prop="frame_special">
                    <template slot-scope="{row}">
                        <video v-if="row.frame_special" :src="row.frame_special" controls  style="width: 200px;"/>
                    </template>
                </el-table-column>
                <el-table-column label="说明" prop="desc"></el-table-column>
                <el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column label="状态" prop="is_open">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.is_open === 0" type="warning" size="normal"  effect="dark">关闭</el-tag>
                        <el-tag v-if="row.is_open === 1" type="success" size="normal"  effect="dark">开启</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleChecked(scope.row)"
                        >查看
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>

        <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="30%"
            @close="closeDialog('form')">

            <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">
                <el-form-item label="礼物ID" prop="gift_id">
                    <el-select v-model="formData.gift_id" remote clearable filterable :remote-method="remoteMethod" placeholder="请选择礼物" @clear="clear">
                        <el-option
                        v-for="item in roomGiftList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                        <el-popover placement="right" trigger="hover">
                            <img :src="item.picture" alt="" style="max-width: 200px;max-height: 200px">
                            <p slot="reference">{{ item.name }}</p>
                        </el-popover>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="框特效" prop="frame_special">
                    <div class="awardBox">
                        <div class="awardInfo" :class="{'hide_box': formData.frame_special, 'show_box': !formData.frame_special}" style="width: 200px;">
                            <!-- <img v-if="formData.frame_special" :src="formData.frame_special" class="avatar" /> -->
                            <video v-if="formData.frame_special" :src="formData.frame_special" controls />
                            <el-upload
                                v-else
                                ref="upload"
                                :auto-upload="true"
                                :http-request="customizeUpload"
                                :on-success="handlePictureSuccess2"
                                action=""
                                class="upload-demo"
                                :limit="1"
                                list-type="picture-card"
                            >
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <span class="closeIcon" @click="handlePictureRemove2"><i class="el-icon-delete"></i></span>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="说明" prop="desc">
                    <el-input
                        type="textarea"
                        rows="3"
                        v-model="formData.desc"
                        placeholder="请输入说明"
                    />

                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input
                        type="textarea"
                        rows="3"
                        v-model="formData.sort"
                        placeholder="请输入排序"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="is_open">
                    <el-radio-group v-model="formData.is_open">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>

            <span slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleOnSubmit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { suitList, suitSave, suitDelete } from '@/api/imperialSuit'
    // 礼物下拉数据
    import { getData } from '@/api/roomGift/giftList'

  	export default {
        name: 'suitList',
        data() {
            return {
                dialogTitle: 'add',
                dialogVisible: false,
                info: {},
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                formData: {
                    id: undefined,
                    gift_id: undefined,
                    desc: undefined,
                    frame_special: undefined,
                    sort: undefined,
                    is_open: 1
                },
                rules: {
                    gift_id: [{ required: true, message: '请选择', trigger: 'blur' }],
                    frame_special: [{ required: true, message: '请上传', trigger: 'blur' }],
                },
                roomGiftList: [],
                optionQuery: {
                    page: 1,
                    page_size: 50,
                    cate_id: 0,
                    style_id: 0
                },
            }
        },
        created() {
            this.getTableData()
            this.getGiftData()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = !this.listQuery[key] ? undefined : this.listQuery[key]
                }
                const {data, code} = await suitList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.data
                    this.total = data.total
                }
                this.loading = false

            },
            getGiftData() {
                getData(this.optionQuery).then(res => {

                    if (res.code === 200) {
                        this.roomGiftList = res.data.data
                    }
                })
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
                this.formData = {
                    id: undefined,
                    gift_id: undefined,
                    desc: undefined,
                    frame_special: undefined,
                    sort: undefined,
                    is_open: 1
                }
            },
            handleEdit(row) {
                this.dialogVisible = true
                this.formData = JSON.parse(JSON.stringify(row))
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该套装, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const { code, data} = await suitDelete({
                        id: row.id
                    })
                    if(code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getTableData()
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleAdd() {
                this.dialogVisible = true
            },
            handleOnSubmit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        for (let key in this.formData) {
                            this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
                        }
                        suitSave(this.formData).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                            }
                            this.dialogVisible = false
                            this.getTableData()
                        })
                    }
                })
            },
            remoteMethod(query) {
                if(query !== '') {
                    this.optionQuery.id = undefined
                    this.optionQuery.gift_name = query
                    this.getGiftData(this.optionQuery)
                }
            },
            clear() {
                this.optionQuery = {
                    page: 1,
                    page_size: 100,
                    cate_id: 0,
                    style_id: 0
                }
                this.getGiftData(this.optionQuery)
            },
            handlePictureSuccess2() {
                this.formData.frame_special = this.ossLastImgUrl
            },
            handlePictureRemove2() {
                this.formData.frame_special = undefined
            },
            handleChecked(row) {
                this.$router.push({
                    path: 'suitDetail',
                    query: {
                        id: row.id
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
::v-deep{
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
.item {
    width: 100px;
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}

}

</style>
